<template>
  <swiper
    class="swiper"
    :class="{ _skeleton: _isLoading }"
    indicator-dots
    indicator-active-color="rgba(255,255,255,.6)"
    indicator-color="rgba(255,255,255,.3)"
    autoplay
    circular
  >
    <swiper-item v-for="(v, i) in list" :key="i" @click="handleClick(v)">
      <view class="swiper-item">
        <TImage
          :src="v.imgUrl"
          width="100%"
          height="100%"
          border-radius="20rpx"
          mode="aspectFill"
          style="margin: 0 auto;"
          @load="imgLoad"
          @error="imgError"
        />
      </view>
    </swiper-item>
  </swiper>
</template>

<script setup lang="ts">
  import { ref, type PropType, computed } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import type { BannerResult } from '@/api/dynamicAllocation/types';
  import { parseConfigRouter } from '@/utils/dynamicConfig';

  const props = defineProps({
    list: {
      type: Array as PropType<BannerResult[]>,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: true,
    },
  });

  const handleClick = (item: BannerResult) => {
    parseConfigRouter(item.typeOptionsId, {
      id: item.optionsId,
      title: item.optionsName,
      categoryList: item.informationCategoryList,
      linkUrl: item.linkUrl,
      officialAccountsLink: item.officialAccountsLink,
      appId: item.appId,
    });
  };

  const _loadNum = ref(0);
  const imgLoad = () => {
    _loadNum.value = _loadNum.value + 1;
  };
  const imgError = () => {
    _loadNum.value = _loadNum.value + 1;
  };
  const _isLoading = computed((): boolean => {
    if (props.loading) {
      // 加载中
      return true;
    } else if (!props.loading && props.list.length && !_loadNum.value) {
      // 加载完成，有数据，但是还在渲染
      return true;
    } else {
      return false;
    }
  });
</script>

<style scoped lang="scss">
  .swiper {
    height: 320rpx;
    .swiper-item {
      text-align: center;
      width: calc(100% - 60rpx);
      height: 320rpx;
      margin: 0 auto;
    }
  }
  .swiper._skeleton {
    width: calc(100% - 60rpx);
    border-radius: 20rpx;
    margin: 0 auto;
  }
</style>
